<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ $game->game_name }}-订单支付</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/js/h5sdk.js', 'resources/js/vuecomponents/components.js', 'resources/scss/h5sdk/pay.scss'])
</head>
<body>
    <div class="container" id="vapp">
        <div class="goback">
            <button class="layui-btn goback-btn" v-on:click="goback">回到游戏</button>
        </div>
        <div v-if="isShow" class="cover"></div>
        <div v-if="isShow" class="main-container">
            <div class="account-header">
                <div class="back-icon" v-on:click="close">
                    <svg t="1691655085303" class="bi-chevron-left" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10310" id="mx_n_1691655085304">
                        <path
                            d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
                            p-id="10311" fill="#ffffff"></path>
                    </svg>
                </div>
            </div>
            <div class="account-content">
            <div class="pay-content">
                <div class="order-info">
                    <div class="order-amount">￥<label class="amount">{{ sprintf("%.2f", $order->money) }}</label></div>
                </div>
                <div v-if="!isPaySuccess" class="pay-type-box">
                    <div class="type-item" v-on:click="weixinPay()">
                        <div class="wxpay-icon">
                            <svg t="1691651773705" class="icon" viewBox="0 0 1228 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3994">
                                <path
                                    d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                                    fill="#15BA11" p-id="3995"></path>
                            </svg>
                        </div>
                        <div class="item-text">微信支付</div>
                    </div>
                </div>
                <div v-if="isPaySuccess" class="pay-type-box">
                    <p>支付成功，请点击关闭返回游戏</p>
                </div>
            </div>
            </div>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                return {
                    isShow: 1,
                    status: {{ $order->status }},
                    tradeNo: '{{ $order->trade_no }}',
                    wexinPayPlatform: {{ $pay_platform }},
                }
            },
            computed: {
                isPaySuccess() {
                    if ([1,2,3].includes(this.status)) {
                        return true
                    } else {
                        return false
                    }
                }
            },
            methods: {
                weixinPay() {
                    var _this = this
                    var params = {
                        trade_no: _this.tradeNo,
                        pay_platform: _this.wexinPayPlatform,
                    }
                    http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                        console.log(code, msg, data)
                        if (code !== 0) {
                            layer.msg(msg)
                            return
                        }
                        _this.onBridgeReady(data.bridge)
                    }, true);
                },
                // 唤起微信支付
                onBridgeReady(bridge) {
                    const _this = this
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":bridge.appId, // 公众号名称，由商户传入
                            "timeStamp":bridge.timeStamp.toString(), // 时间戳，自1970年以来的秒数
                            "nonceStr":bridge.nonceStr, // 随机串
                            "package":bridge.package,
                            "signType":"MD5",         // 微信签名方式：
                            "paySign":bridge.paySign // 微信签名
                        },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                _this.status = 1
                            }else{
                                // 支付失败
                                layer.msg('支付未完成！')
                            }
                        }
                    )
                },
                close() {
                    this.isShow = 0
                },
                goback() {
                    var url = '{{ $game_url }}';
                    window.location.href = url;
                }
            }
        })
        app.mount('#vapp')
    })
</script>

</html>
